<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>课程介绍专栏</title>
	<style>
	*{
		margin: 0;
		padding: 0;
		font-size:14px; 	
		/*清除默认效果*/
	}
	dd{
		width: 460px;
		height: 145px;
		margin: -4px;
		padding: 0;
		background: url("bg.png");	
	}
	.one,.three{
		padding-top:43px;
		width:120px;
		height:80px;
		display: inline-block;
		text-align: right;	
	}
	.two{
		color: white;
		padding-top:39px;
		width:90px;
		height:80px;
		display: inline-block;
		text-align: right;
	}
	a:active{
		/*鼠标移到元素上时向此元素添加特殊的css样式*/
	color: #ce4d52;
	background:url("bg1.png");
	}
	a{	
		color: white;
		display: block;
		width: 460px;
		height: 145px;
		text-decoration: none;	
	}
</style>
</head>
<body>
	<dl>
		<dt><img src="head.png" width="456" height="100" alt="title"></dt>
			<dd> 
				<a href="">
				<!--刷新当前页面-->
				<span class="one"> 印刷流程<br>广告设计<br>企业形象设计</span>
				<span class="two"> &nbsp;<br>1<br>&nbsp;</span>
				<span class="three"><br>&nbsp;平面设计<br>&nbsp;</span>
				</a>
			</dd>
			<dd><a href="" >
			<span class="one">页面设计<br>HTML+CSS<br>JS和JQ交互特效</span>
			<span class="two">&nbsp;<br>2<br>&nbsp;</span>
			<span class="three">&nbsp;<br>网页设计<br>&nbsp;</span></a>
			</dd>
		<dd><a href="" >
			<span class="one">视觉创意设计<br>人机交互原则<br>UI设计规范</span>
			<span class="two">&nbsp;<br>3<br>&nbsp;</span>
			<span class="three">&nbsp;<br>网页设计<br>&nbsp;</span></a>
			</dd>		
	</dl>
</body>
</html>
